<template>
  <div class="addBrand-container">
    <div class="container">
      <el-page-header @back="router.back()" :content="isEdit ? '修改员工信息' : '添加员工'" />
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" class="form-box">
        <el-form-item label="账号：" prop="username">
          <el-input v-model="formData.username" placeholder="请输入账号" maxlength="20" />
        </el-form-item>
        <el-form-item label="员工姓名：" prop="name">
          <el-input v-model="formData.name" placeholder="请输入员工姓名" maxlength="12" />
        </el-form-item>
        <el-form-item label="手机号：" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-radio-group v-model="formData.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号：" prop="idNumber">
          <el-input v-model="formData.idNumber" placeholder="请输入身份证号" maxlength="18" />
        </el-form-item>

        <div class="subBox">
          <el-form-item>
            <el-button @click="router.back()">取消</el-button>
            <el-button type="primary" class="submit-btn" @click="submitForm(false)" :loading="isSaving">保存</el-button>
            <el-button v-if="!isEdit" type="warning" @click="submitForm(true)" :loading="isSaving">保存并继续添加</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { getEmployeeById, addEmployee, editEmployee } from '@/api/employee';
import type { IEmployeeAddForm } from '@/types/employee';

const route = useRoute();
const router = useRouter();
const formRef = ref<FormInstance>();
const isSaving = ref(false);
const formData = reactive<any>({
  username: '', name: '', phone: '', sex: '1', idNumber: ''
});

const isEdit = computed(() => !!route.params.id);
const employeeId = computed(() => Number(route.params.id));

const formRules = reactive<FormRules>({
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  idNumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
});

const fetchEmployeeDetail = async (id: number) => {
  const res = await getEmployeeById(id);
  Object.assign(formData, { ...res.data, sex: String(res.data.sex) });
};

const submitForm = (continueAdding: boolean) => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      isSaving.value = true;
      try {
        const apiCall = isEdit.value ? editEmployee : addEmployee;
        await apiCall({ ...formData, id: isEdit.value ? employeeId.value : undefined });

        ElMessage.success(`${isEdit.value ? '修改' : '添加'}成功！`);

        if (continueAdding) {
          formRef.value?.resetFields();
        } else {
          router.back();
        }
      } finally {
        isSaving.value = false;
      }
    }
  });
};

onMounted(() => {
  if (isEdit.value) {
    fetchEmployeeDetail(employeeId.value);
  }
});
</script>

<style lang="scss" scoped>
.addBrand-container { padding: 20px; }
.container { background-color: #fff; padding: 30px; border-radius: 4px; }
.el-page-header { margin-bottom: 30px; }
.form-box { max-width: 600px; }
.subBox {
  padding-top: 30px;
  text-align: center;
  margin-left: -100px; // 抵消 label-width
  border-top: solid 1px #f3f4f7;
}
.submit-btn { background-color: #333; border-color: #333; }
</style>
